<template>
    <div class="content">
        <div class="left-bottom">
            <div class="title">
                所属机构
            </div>
            <div class="container">
                <div>
                    <span>机构名称：</span>{{ orgSupInfo.orgName }}
                </div>
                <div>
                    <span>机构属性：</span>{{ orgSupInfo.type | orgStatsText }}
                </div>
                <div>
                    <span>机构地址：</span> {{ orgSupInfo.province }}{{ orgSupInfo.city
                    }}{{ orgSupInfo.area }}{{ orgSupInfo.street
                    }}{{ orgSupInfo.community }}
                    <!-- {{ orgSupInfo.address }} -->
                </div>
                <div>
                    <span>负责人姓名：</span>{{ orgSupInfo.username }}
                </div>
                <div>
                    <span>负责人手机号：</span>{{ orgSupInfo.mobile }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { reqOrgSuperLevelInfo } from "@/api/api";
import { mapState } from "vuex";

export default {
    components: {
    },
    data() {
        return {
            orgSupInfo: {},
        };
    },
    computed: {
        ...mapState(["user"]),
    },
    watch: {},
    methods: {
        // 查询上级组织机构信息
        async getOrgSuperLevelInfo(orgId) {
            const res = await reqOrgSuperLevelInfo(orgId);
            //   console.log("查询上级组织机构信息", res);
            this.orgSupInfo = res.data.row;
        },
    },
    created() {
    },
    mounted() { },
};
</script>

<style lang="less" scoped>
.fontSize (@px, @attr: font-size) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.lineHeight (@px, @attr: line-height) {
    @vh: (@px / 1080) * 100;
    @{attr}:~"@{vh}vh";
}

.width (@px, @attr: width) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.height (@px, @attr: height) {
    @vh: (@px / 1080) * 100;
    @{attr}:~"@{vh}vh";
}

.content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .title {
        .height(43);
        width: 100%;
        margin: 0 auto;
        .fontSize(16);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        background: url("../../../assets/images/datavPop/head.png") no-repeat;
        background-size: 100% 100%;
        font-weight: 600;

        i {
            .fontSize(20);
            color: #fff;
        }
    }

    .left-bottom {
        height: 100%;
        // background: rgba(13, 24, 86, 1);
        box-shadow: inset -9px 3px 20px 0px #032b60, inset 9px -3px 20px 0px #032e68;
    }
}

.container {
    height: 82%;
    overflow-y: auto;
    padding-left: 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    font-size: 0.8vw;

    >div {

        // margin-bottom: 10px;
        >span:first-of-type {
            color: #8299c9;
        }
    }
}
</style>